<template>
    <div style="user-select:none;" class="app-container">     
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">            
                    <el-form-item label="上传时间">
                        <el-date-picker
                        v-model="dateRange"
                        size="small"
                        style="width: 320px"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" v-loading="loading" style="width: 100%">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="tableName"   label="数据表名称" ></el-table-column>
                    <el-table-column prop="modelName"   label="模型名称"   ></el-table-column>
                    <el-table-column prop="createTime" label="上传时间" width="200">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createBy" label="操作人员" width="120"></el-table-column>
                    <el-table-column prop="fileCount" label="文件总数" align="center" width="120">
                         <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">{{ scope.row.fileCount }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="successCount" label="完成总数" width="120"></el-table-column>            
                </el-table>
                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                    />
            </el-col>
        </el-row>

    <el-drawer
      title="文件明细" 
      :visible.sync="fileDetailOpen"
       close-on-press-escape
      :destroy-on-close="true"
      :direction="direction"
      size="70%"
      :with-header="true" append-to-body>
      <div class="app-container"> 
         <el-table :data="fileDetail">
            <el-table-column property="fileInfo.fileName" label="文件名称"  :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column property="status" label="处理状态" width="250" :formatter="formatterStatus"></el-table-column>
            <el-table-column property="fileCount" label="文件总条数" width="150"></el-table-column>
            <el-table-column property="dbCount" label="入库总条数" width="150"></el-table-column>
            <el-table-column property="logId" label="失败总条数" width="150">
                <template slot-scope="scope">
                    <el-link type="danger" :underline="false">{{ scope.row.fileCount -  scope.row.dbCount }}</el-link>
                </template>
            </el-table-column>
            <el-table-column property="logId"  label="操作" >

                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleRestocking(scope.row)"
                    >重新入库</el-button>
                    
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                    >删除</el-button>  

                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="viewOCRResult(scope.row)"
                    >OCR结果查看</el-button>

                </template>

            </el-table-column>
         </el-table>
      </div>
    </el-drawer>

    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%">
            <vue-json-editor class="json"
                v-model="json" 
                :showBtns="false"
                :mode="'view'"
                :theme= "theme"
                :modes=modes
                :auto-format="true" 
                :smart-indent="true" 
                :line-wrap="true" 
                ref="editor"
                lang="zh" >
            </vue-json-editor>
    </el-dialog> 
    </div>    
</template>

<script>
  import { restocking, getHistory, getUploadDetail, removeLog } from "@/api/db/table";
  import vueJsonEditor from 'vue-json-editor'

  export default {
    components: { vueJsonEditor },
    data() {
        return {
            // 遮罩层
            loading: true,
            modelId: -1,   
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                tableId: ''
            },
            // 日期范围
            dateRange: [],
            tableData: [],
            // 总条数
            total: 0,
            fileDetailOpen: false, 
            dialogVisible: false,
            fileDetail:[],
            direction: 'btt',
            modes: ["view"],
            theme: "dracula", //dracula
            json: []
        }
    },
    created() {
        this.queryParams.tableId = this.$route.params.tableId ;
        this.modelId = this.$route.params.modelId ;
        this.getList()
    },
    methods: {    
         getList() {
            this.loading = true;
            getHistory(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
                }
            );
        }, 
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleClick(row) {
            this.fileDetail = [] ;
            getUploadDetail(row.batchId).then(response => {
                this.fileDetail = response.rows ;
                this.fileDetailOpen = true ;
            }) ;            
        },
        formatterStatus(row, column, cellValue, index) {
            //1 接收完成  2 解析成功 3 解析失败 4 入库完成 5 入库失败
            var res = "" ;
            switch (row.status){
                case -1:
                    res = "文件不存在"  // 当表达式的结果等于 value1 时，则执行该代码
                    break;
                case 1:
                    res = "系统已接收"  // 当表达式的结果等于 value1 时，则执行该代码
                    break;
                case 2:
                    res = "OCR解析成功"  // 当表达式的结果等于 value2 时，则执行该代码
                    break;
                case 3:
                    res = "OCR解析失败"  // 当表达式的结果等于 value2 时，则执行该代码
                    break;
                case 4:
                    res = "入库成功"   // 当表达式的结果等于 value2 时，则执行该代码
                    break;
                case 5:
                    res = "入库失败"  // 当表达式的结果等于 value2 时，则执行该代码
                    break;
                default :
                    res = "状态未知"  // 如果没有与表达式相同的值，则执行该代码
            }
            return res ;
        },
        viewOCRResult(row) {
            this.dialogVisible = true,
            this.json = JSON.parse(row.recognizeResult) ;
        },
        handleDelete(row) {
            removeLog(row.logId).then(reponse => {
                this.handleClick(row);
                this.getList();
            })
        },
        handleRestocking(row) {
            restocking(row.logId).then(reponse => {
                this.handleClick(row);
                this.getList();
            })
            
        }

    },
}

</script>

<style >
   .jsoneditor-vue{
	    height: 100%;
	}
    
</style>